<template>
  <el-dialog
    :title="type === 'add' ? '新增动态' : '修改动态'"
    :visible.sync="dialogFormVisible"
    @closed="closed"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="dialogForm"
      label-position="right"
      label-width="100px"
    >
      <el-form-item label="识别码：" prop="targetNumber">
        <el-input
          @blur="identify"
          @change="targetNumberChangeHandle"
          placeholder="请输入识别码"
          v-model.trim="form.targetNumber"
        ></el-input>
      </el-form-item>
      <el-form-item label="目标名称：" prop="targetName">
        <el-input
          :disabled="true"
          placeholder="自动带入目标名称"
          v-model.trim="form.targetName"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="目标类型：" prop="targetType">
        <el-input
          :disabled="true"
          placeholder="自动带入目标类型"
          v-model.trim="form.targetType"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="变更类型：" prop="changeType">
        <el-select placeholder="请选择" v-model="form.changeType">
          <el-option
            v-for="(val, k) in changeTypeList"
            :key="k"
            :label="val"
            :value="k"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="变更时间：" prop="changeTime">
        <el-date-picker
          v-model="form.changeTime"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="变更内容：" prop="changeContent">
        <el-input type="textarea" v-model.trim="form.changeContent"> </el-input>
      </el-form-item>
      <el-form-item label="备注：" prop="remark">
        <el-input placeholder="请填写备注信息" v-model.trim="form.remark">
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "AddDialog",
  data() {
    return {
      type: null,
      dynamicId: null,
      dialogFormVisible: false,
      changeTypeList: [],
      form: {
        targetNumber: null,
        targetName: null,
        targetType: null,
        targetTypeId: null,
        changeType: null,
        changeTime: null,
        changeContent: null,
        remark: null,
        entityId: null,
      },
      rules: {
        targetNumber: [
          {
            required: true,
            message: "请输入识别码",
            trigger: "blur",
          },
        ],
        /*  targetName: [
          {
            required: true,
            message: "请输入目标名称",
            trigger: "blur",
          },
        ],
        targetType: [
          {
            required: true,
            message: "请输入目标类型",
            trigger: "blur",
          },
        ], */
        changeType: [
          {
            required: true,
            message: "请选择变更类型",
            trigger: "blur",
          },
        ],
        changeTime: [
          {
            required: true,
            message: "请选择变更时间",
            trigger: "blur",
          },
        ],
        changeContent: [
          {
            required: true,
            message: "请输入变更内容",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    open(type, dynamicId = null) {
      this.type = type;
      this.dynamicId = dynamicId;
      this.dialogFormVisible = true;
      this.init();
    },
    init() {
      this.getChangeTypeList();
      console.log("弹框属性", this.type);
      if (this.type === "edit") {
        this.getDynamicDetail();
      }
    },
    identify() {
      if (!this.form.targetNumber) return;
      this.$axios
        .get(
          this.$api.situationInfo.getTargetNameAndTypeByCodeDynamic +
            `/${this.$parent.curProject}/${this.form.targetNumber}`
        )
        .then((res) => {
          // console.log("@识别", res);
          this.form.targetName = res.data.data.targetName;
          this.form.targetType = res.data.data.targetType;
          this.form.targetTypeId = res.data.data.targetTypeId;
          this.form.entityId = res.data.data.entityId;
        });
    },
    getChangeTypeList() {
      this.$axios
        .get(this.$api.situationInfo.getChangeType)
        .then((res) => {
          // console.log("@获取变更类型", res);
          this.changeTypeList = res.data.data;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    cancel() {
      this.dialogFormVisible = false;
    },
    closed() {
      this.$refs.dialogForm.resetFields();
    },
    targetNumberChangeHandle() {
      this.form.targetName = "";
      this.form.targetType = "";
      this.form.targetTypeId = "";
      this.form.entityId = "";
    },
    submit() {
      this.$refs.dialogForm.validate((valid) => {
        if (!valid) return;
        if (this.type === "add") {
          this.$axios
            .post(this.$api.situationInfo.addTargetDynamic, {
              projectId: this.$parent.curProject,
              entityId: this.form.entityId,
              targetNumber: this.form.targetNumber,
              targetName: this.form.targetName,
              targetTypeId: this.form.targetTypeId,
              changeType: this.form.changeType,
              changeTime: this.form.changeTime,
              changeContent: this.form.changeContent,
              remark: this.form.remark,
            })
            .then((res) => {
              // console.log("@新增", res);
              if (res.data.code === 200) {
                this.$message.success(res.data.message);
                this.dialogFormVisible = false;
                this.$refs.dialogForm.resetFields();
                this.$emit("operateCompleted");
              } else {
                this.$message.error(res.data.message);
              }
            })
            .catch((err) => {
              this.$message.error(err);
            });
        } else {
          this.$axios
            .post(this.$api.situationInfo.updateTargetDynamic, {
              projectId: this.$parent.curProject,
              dynamicId: this.dynamicId,
              entityId: this.form.entityId,
              targetNumber: this.form.targetNumber,
              targetName: this.form.targetName,
              targetTypeId: this.form.targetTypeId,
              changeType: this.form.changeType,
              changeTime: this.form.changeTime,
              changeContent: this.form.changeContent,
              remark: this.form.remark,
            })
            .then((res) => {
              console.log("@修改", res);
              if (res.data.code === 200) {
                this.$message.success(res.data.message);
                this.dialogFormVisible = false;
                this.$refs.dialogForm.resetFields();
                this.$emit("operateCompleted");
              } else {
                this.$message.success(res.data.message);
              }
            })
            .catch((err) => {
              this.$message.error(err);
            });
        }
      });
    },
    getDynamicDetail() {
      this.$axios
        .get(
          this.$api.situationInfo.getTargetDynamicInfo + `/${this.dynamicId}`
        )
        .then((res) => {
          console.log("@获取动态详情", res);
          this.form.targetNumber = res.data.data.targetNumber;
          this.form.targetName = res.data.data.targetName;
          this.form.targetTypeId = res.data.data.targetTypeId;
          this.form.targetType = res.data.data.targetTypeName;
          this.form.changeType = res.data.data.changeType + "";
          this.form.changeTime = res.data.data.changeTime;
          this.form.changeContent = res.data.data.changeContent;
          this.form.remark = res.data.data.remark;
          this.form.entityId = res.data.data.entityId;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 0;
}
/deep/ .el-dialog {
  width: 500px;
  border-radius: 5px;

  .el-dialog__body {
    padding: 0 30px;
    border-top: 1px solid $gray-400;
  }
  .el-dialog__footer {
    padding: 0 30px;
    padding-bottom: 20px;
  }
}

.el-form-item {
  margin: 20px 0;
  .el-select,
  .el-date-editor {
    width: 100%;
  }
}
</style>
